/*
 * @Description:删除自定义选项弹框
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-06 14:05:45
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-08 14:56:39
 */
import React, { useState, useEffect } from 'react';
import PubSub from 'pubsub-js';
import { Form, Input, Button, message } from 'antd';
import {
    DeleteOutlined,
    FormOutlined
} from '@ant-design/icons';
import './index.css'
// import '../../../../../../../button.css'
const DelteSletectValue = (props) => {
    const [selectDate, setSlectData] = useState([
        { id: 0, name: '客服类型', flage: false },
        { id: 1, name: '客服级别', flage: false },
        { id: 2, name: '客服来源', flage: false },
        { id: 3, name: '所属行业', flage: false },
        { id: 4, name: '职位', flage: false },
        { id: 5, name: '跟单方式', flage: false },
        { id: 6, name: '跟单状态', flage: false },
        { id: 7, name: '合同分类', flage: false },
        { id: 8, name: '售后分类', flage: false },
        { id: 9, name: '收入分类', flage: false },
        { id: 10, name: '支出分类', flage: false },
        { id: 11, name: '资金账户', flage: false },
        { id: 12, name: '文件分类', flage: false },
        { id: 13, name: '公告分支', flage: false },
        { id: 14, name: '知识库分类', flage: false },
        { id: 15, name: '报告分类', flage: false },
        { id: 16, name: '工单类型', flage: true },
        { id: 17, name: '交通方式', flage: false },
    ])
    const [tableData, settableData] = useState([
        /* { id: 1, name: '老板' },
        { id: 2, name: '董事长' },
        { id: 3, name: '总经理' },
        { id: 4, name: '负责人' },
        { id: 5, name: '业务员' },
        { id: 6, name: '技术员' } */
    ])
    const [btnFlage, setBtnfalge] = useState(true)
    const [FormRef] = Form.useForm()//解构Form
    const [selectId, setSelectId] = useState(null)
    const [listShow, setListListShow] = useState(false)
    const info = (str) => {
        message.error(str);
    };
    function modificateName(x) {
        let dataArr = []
        selectDate.forEach(item => {
            if (item.name === x) {
                item.flage = true
                dataArr.push(item)
            } else {
                item.flage = false
                dataArr.push(item)
            }
        });
        setSlectData(dataArr)
        // console.log(x);
    }
    //修改list中数据函数
    function modifiListData(id, name) {
        let arr = []
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i].id === id) {
                tableData[i].sendName = name
                arr.push(tableData[i])
            } else {
                arr.push(tableData[i])
            }
        }
        settableData(arr)
        // console.log(arr);
    }
    // 修改列表数据类型名称
    function modifiData(e, id) {
        e.stopPropagation()
        // console.log(id);
        let data = tableData.find(item => {
            return item.id === id
        })
        setSelectId(id)
        // setInputValue(data.name)
        FormRef.setFieldsValue({
            addPosition: data.sendName
        })
        setBtnfalge(false)//修改按钮状态
        //发布 tableData
        // PubSub.publish('tableData', tableData)
    }
    // 删除列表数据
    function deleteData(e, id) {
        // console.log(id);
        let dataArr = tableData.filter(item => {
            return item.id !== id
        })
        // console.log(dataArr);
        settableData(dataArr)
        //发布 tableData

        let { cateName } = props.position
        // console.log("props########################", cateName);
        PubSub.publish('delateData', { dataArr, cateName })
    }
    // 修改保存
    function saveHeadle(e) {
        // console.log(e);
        let ref = FormRef.getFieldsValue()
        modifiListData(selectId, ref.addPosition)//调用修改函数
        FormRef.setFieldsValue({   //清空输入
            addPosition: ''
        })
        //发布 tableData
        // PubSub.publish('tableData', tableData)
    }
    // 修改取消
    function cancleHeadle(e) {
        setBtnfalge(true)
        FormRef.setFieldsValue({//清空输入
            addPosition: ''
        })
        setListListShow(true)
    }
    // 添加列表数据
    function addLiatData(e) {
        let ref = FormRef.getFieldsValue()
        // console.log(ref);
        if (ref.addPosition === null || ref.addPosition === '') {
            info('添加不能为空！')
            return
        } else {
            let dataItem = { id: tableData.length + parseInt(Math.random() * 100000000), sendName: ref.addPosition }
            // console.log('dataItem', dataItem);
            settableData([...tableData, dataItem])//修改渲染数据
            setListListShow(false)//修改头部显示状态
            FormRef.setFieldsValue({//清空输入
                addPosition: ''
            })
            //发布 addData给父组件
            PubSub.publish('addData', { ref: ref, data: [...tableData, dataItem] })
            // console.log('tableData', tableData);
        }

    }


    useEffect(() => {
        // settableData([...props.position])
        const position = props.position
        // console.log('删除自定义选项值', position);
        settableData([...position.datatList])
        modificateName(position.cateName)
        // console.log(props);
    }, [props]);
    return (
        <div className='delteSletectValue-contanier' >
            <div className={listShow ? 'delteSletectValue-list' : 'delteSletectValue-hide'}>
                {
                    selectDate.map(item => {
                        return (<div className={item.flage ? 'select-item' : ''} key={item.id}>{item.name}</div>)
                    })
                }
                {/* <div>客服类型</div> */}
            </div>

            <div className='delteSletectValue-header'>
                <h3>删除自定义选项值</h3>
                <Form name="addConlient" labelCol={{ span: 4, offset: 0 }} wrapperCol={{ span: 24 }} form={FormRef}>
                    <Form.Item label="参数" name="addPosition">
                        <Input name="addPosition" style={{ width: 200 }} />
                    </Form.Item>
                    <div className='delteSletectValue-button'>
                        <Button className={btnFlage ? 'btn-bgc-16' : ' butShow-hide'} onClick={addLiatData} htmlType="submit">添加</Button>
                        <Button className={btnFlage ? 'butShow-hide' : 'btn-bgc-16 '} onClick={saveHeadle} htmlType="submit">保存</Button>&nbsp;
                        <Button className={btnFlage ? 'butShow-hide' : 'btn-bgc-17 '} onClick={cancleHeadle}>取消</Button>
                    </div>
                </Form>
                {/* 表格部分 */}
                <div className='delteSletectValue-title'>
                    <div>类型</div>
                    <div>管理</div>
                </div>
                <ul className='delteSletectValue-table'>
                    {
                        tableData.map(item => {
                            return (
                                <li className='delteSletectValue-table-item' key={item.id}>
                                    <div onClick={(e, id) => modifiData(e, item.id)}>{item.sendName}</div>
                                    <div>
                                        <FormOutlined style={{ color: '#407CD0', fontSize: 18 }} onClick={(e, id) => modifiData(e, item.id)} />&nbsp;&nbsp;
                                        <DeleteOutlined style={{ color: '#D20000', fontSize: 18 }} onClick={(e, id) => deleteData(e, item.id)} />
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    );
}

export default DelteSletectValue;
